<script lang="ts" setup>
type Props = {
  url: string
  cetName: string
  context: string
  time: string
  cont: number
}
withDefaults(defineProps<Props>(), {})
</script>

<template>
  <div class="user_list_item">
    <n-badge :value="cont">
      <n-avatar :size="40" :src="url" />
    </n-badge>
    <div class="context">
      <div class="title">
        <div class="cetName">{{ cetName }}</div>
        <div class="time">{{ time }}</div>
      </div>
      <div class="sub_title">{{ context }}</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.user_list_item {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  user-select: none;
  -webkit-app-region: no-drag;
  &:hover {
    background-color: #dfdddb;
  }
  .n-avatar {
    img {
      object-fit: cover;
    }
  }
  .context {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .cetName {
        padding: 0;
        margin: 0;
      }
      .time {
        font-size: 12px;
        color: #a2a2a2;
      }
    }
    .sub_title {
      font-size: 12px;
      color: #a2a2a2;
      width: 80%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .cetName {
    margin-left: 20px;
    user-select: none;
  }
}

.active {
  background-color: #c6c5c5;
  &:hover {
    background-color: #c6c5c5;
  }
}
</style>
